<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>

      <!--<v-flex xs10 md6>
        <v-card>
          <v-card-text class="px2">

            <div ref="sale" style="width: 100%;height:1000px"></div>
          </v-card-text>
        </v-card>
      </v-flex>-->
      用户量统计:<br>
      最近7天
      <div ref="u1" style="width: 100%;height:500px"></div>
      最近30天
      <div ref="u2" style="width: 100%;height:500px"></div>
      自定义日期范围:
      <br>




<div>
      <input type="date" name="userstarttime"></input>-
      <input type="date" name="userendtime"></input>
</div>






      信息发布量统计:<br>

      最近7天
      <div ref="sale" style="width: 100%;height:500px"></div>
      最近30天
      <div ref="pie" style="width: 100%;height:500px"></div>
      <!--<v-flex xs10 md6>
        <v-card >
          <v-card-text class="px2">

          </v-card-text>
        </v-card>
      </v-flex>-->
    </v-layout>
  </v-container>
</template>






<script>

  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');

  require('echarts/lib/chart/bar');
  require('echarts/lib/chart/pie');
  require('echarts/lib/chart/line');

  export default {
    name: "dashboard",
    data(){


      return{
        unum:null,
        dnum:null,
        date: ""// 存储选择的日期
      }

    },
    mounted(){



      this.$nextTick(() => {

        var u1 = echarts.init(this.$refs.u1);

        this.$http.post("http://localhost:10010/api/item/tongji/TongjiUserAndPaoTui").then(res=> {


          var xdata = new Array()
          var ydata = new Array()

          res.data.forEach(order => {
           /* xdata.push(order.name)
            ydata.push(order.value)*/
            console.log("ss:"+order.name)
            console.log("ss:"+order.value)
          })

          u1.setOption({
            xAxis: {
              type: 'category',
              data: [8.1,8.2,8.3,8.4,8.5,8.6,8.7]
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [1,2,3,4,2,5,7],
              type:'line',
            }]

          });



        });




        const u2 = echarts.init(this.$refs.u2);

        this.$http.post("http://localhost:10010/api/item/tongji/TongjiStatusCount").then(res=> {


          var xdata = new Array()
          var ydata = new Array()

          res.data.forEach(order => {
          /*  xdata.push(order.name)
            ydata.push(order.value)*/
            console.log("ss:"+order.name)
            console.log("ss:"+order.value)
          })

          u2.setOption({
            xAxis: {
              type: 'category',
              data: [8.1,8.10,8.20,8.30]
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [23,5,45,23],
              type:'line',
            }]

          });
        })

        var sale = echarts.init(this.$refs.sale);

           this.$http.post("http://localhost:10010/api/item/tongji/TongjiUserAndPaoTui").then(res=> {


            var xdata = new Array()
            var ydata = new Array()

            res.data.forEach(order => {
              xdata.push(order.name)
              ydata.push(order.value)
            /*  console.log("ss:"+order.nae)
              console.log("ss:"+order.dtime)*/
            })

            sale.setOption({
              xAxis: {
                type: 'category',
                data: [8.1,8.10,8.20,8.30]
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: [3,25,15,23],
                type:'line',
              }]

          });
          })


       /* var sale = echarts.init(this.$refs.sale);

        this.$http.post("http://localhost:10010/api/item/tongji/TongjiStatusCount").then(res=> {


          var xdata = new Array()
          var ydata = new Array()

          res.data.forEach(order => {
            xdata.push(order.name)
            ydata.push(order.value)
              console.log("ss1111:"+order.name)
              console.log("ss22222:"+order.value)
          })

          sale.setOption({
            xAxis: {
              type: 'category',
              data: xdata
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: ydata,
              type:'line',
            }]

          });
        })*/
        /*    this.myAjax({
              url:"",
              dataType:"json",
              type:"post",

              success:function(res) {
                for(var i=0;i<res.length;i++){
                  num[i]=res[i].num;
                  name[i]=res[i].cname
                }
                option = {
                  xAxis: {
                    type: 'category',
                    data: cname
                  },
                  yAxis: {
                    type: 'value'
                  },
                  series: [{
                    data: num,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                      color: 'rgba(220, 220, 220, 0.8)'
                    }
                  }]
                };
                // 使用刚指定的配置项和数据显示图表。
                sale.setOption(option);
              }

            })
    */









       /* const pie = echarts.init(this.$refs.pie);

        this.myAjax.post("/manage/countOrderByMonth").then(res=> {


          var xdata = new Array()
          var ydata = new Array()

          res.data.forEach(order => {
            xdata.push(order.mtime)
            ydata.push(order.mnum)
            console.log("ss:"+order.mnum)
            console.log("ss:"+order.mtime)
          })

          pie.setOption({
            xAxis: {
              type: 'category',
              data: xdata
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: ydata,
              type:'line',
            }]

          });
        })*/



      })
    },
    methods:{
      queryUser(){
        this.$http.post("/manage/queryCountUser").then(res=>{
          this.unum=res.data
          /*  $("#span1").value(res.data)*/
          /*document.getElementById("span1").value(res.data)*/
        })
      },
      queryDriver(){
        this.$http.post("/manage/queryCountDriver").then(res=>{
          this.dnum=res.data
        })
      }
    }




  }
</script>

<style scoped>

</style>
